<template>
  <div class="fd">
    <div class="food_button_one">
      <span class="nvi_span">当前位置:</span>
      <span class="nvi_span">成都团购</span>
      <span class="nvi_span">> 全部团购</span>
    </div>
    <div class="food_button">
      <div class="container">
        <div class="food_button_two">
          <div class="left">
            <span class="food_button_two_right_1">城市：</span>
            <button class="food_button_two_right_2">成都</button>
          </div>
          <div class="right">
            <button class="food_button_two_left">登录</button>
            <button class="food_button_two_left two">注册</button>
          </div>
        </div>
      </div>
      <div class="food_button_three">
        <a href class="dv">首页</a>
        <span>|</span>
        <a href class="dv">订单</a>
        <span>|</span>
        <a href class="dv">客户端</a>
        <span>|</span>
        <a href class="dv">电脑版</a>
        <span>|</span>
        <a href class="dv">帮助</a>
        <span>|</span>
      </div>
      <div class="food_button_four">
        <span>
          友情链接：
          <router-link to="movie" class="cat">猫眼电影</router-link>
        </span>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">
          ©2019 美团网
          <a href="http://www.miibeian.gov.cn/">京ICP证070791号</a>
        </span>
      </div>
    </div>
  </div>
</template>


<script>
export default {};
</script>
<style scoped>
.fd {
  padding: 0.3rem 0.2rem 0.4rem;
  background-color: #f0efed;
}
.food_button_one {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.nvi_span {
  color: #06c1ae;
  font-size: 0.24rem;
  padding: 0.3rem 0.06rem;
}
.left {
  float: right;
  /* padding-right: 0.1rem; */
}
.right {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.food_button_two_left {
  padding: 0 0.3rem;
  border: 0.02rem solid #06c1ae;
  height: 0.6rem;
  padding: 0 0.32rem;
  text-align: center;
  border-radius: 0.06rem;
  font-size: 0.28rem;
  vertical-align: middle;
  line-height: 0.6rem;
  color: #06c1ae;
  background-color: #f0efed;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
}
.food_button_two_left.two{
  margin-left: 0.2rem;
}

.food_button_two_right_2 {
  display: inline-block;
  border: 0.02rem solid #06c1ae;
  padding: 0 0.6rem;
  height: 0.6rem;
  background: 0;
  text-align: center;
  color: #06c1ae;
  box-sizing: border-box;
  line-height: 0.58rem;
  margin-right: 0.01rem;
  cursor: pointer;
  border-radius: 0.06rem;
}
.dv {
  margin: 3%;
  text-decoration: none;
  color: #06c1ae;
  font-size: 0.24rem;
}
.container {
  margin-bottom: 0.4rem;
}
.cat {
  text-decoration: none;
  color: #06c1ae;
}
.food_button_three {
  padding: 0 0.18rem;
}
.fd .food_button_four {
  margin: 0.24rem 0.2rem;
  font-size: 0.24rem;
}
.footer-copyright {
  color: #999;
  font-size: 0.22rem;
  text-align: center;
  position: relative;
}
.hr {
  display: block;
  content: "";
  width: 100%;
  position: absolute;
  top: 50%;
  border-top: 1px solid #999;
}
.footer-copyright-text {
  position: relative;
  padding: 0 0.3rem;
  background-color: #f0efed;
}
.footer-copyright a {
  text-decoration: none;
  color: #999;
}
</style>


